{namespace esn.soy.dialog.networkCreatorDialog}

/**
 *
 */
{template .content}
<div class="esnNetworkCreatorDialog">
  <div class="introduction">
    <b>Congratulations, you're half way there!</b>  This is one of the most
    important sections of the survey, so please take your time. You'll be
    using the network you create throughout the remainder of the survey.
  </div>
  <div class="relationDef">
    <u>Relation</u>:  Someone you <b>interact</b> with and consider to be at
     least an <b>acquaintance</b> (who lives on-campus).
  </div>
  <ol>
    <li class="section">
      There are four categories of relations you will be taken through to create
      your on campus social network:
      <div class="listSpacer"></div>
      <ul>
        <li><b>FLOOR</b>: Relations who live on your dorm floor.</li>
        <li><b>DORM</b>: Other relations who live in your dorm.</li>
        <li><b>CLASS/MAJOR</b>: Relations in your classes and/or major.</li>
        <li><b>OTHER</b>: All other relations.</li>
      </ul>
    </li>
    <li class="section">
      <b>Facebook Contacts</b>: If you wish to use the optional Facebook contacts
      click the Use Facebook Contacts button.
      <div class="listSpacer"></div>
      <center><img src="/static/images/fb-button-example.png"></center>
      <div class="listSpacer"></div>
      <ul>
        <li>You will be asked to login to your facebook account (if you are not
            already logged in).</li>
        <li>You will then be asked to login to the MU Residence Study.</li>
        <li>All of your Facebook friends who also live on campus will show up in the
            Facebook Relations box.</li> 
      </ul>
      <div class="fbNote">
        Note: Friends who have different names for their Facebook pages will not
        show up in your list and you will have to add them using the Autocomplete
        menu.
      </div>
    </li>
    <li class="section">
      For each category think about all people  in the category with whom you{sp}
      <b>interact</b> and consider to be at least an <b>acquaintance</b>.  
    </li>
    <li class="section">
      First, <b>drag</b> all relations in the Facebook box to the current relations
      box (i.e. Floor Relations).
    </li>
    <li class="section">
      <img src="/static/images/autocomplete-example.png" align="right" style="width: 225px;">
      Next, using the autocomplete menu, <b>add</b> anyone that is still missing
      from the current relations box (i.e. FLOOR Relations).
    </li>
    <li class="section">
      Click “Go to Next Step” button when finished with each category.
    </li>
    <li class="section">
      Repeat these steps for each of the four categories of relations.
    </li>
  </ol>
</div>
{/template}
